<template>
    <div class="box">
        <div class="title">
            <div class="heng"></div><div class="yuan"></div>
            <h1>推荐商品</h1> 
            <div class="yuan"></div><div class="heng"></div>
        </div>
        <div class="nav">
            <div v-for="(item,index) in Nav" class="box1">
                <div class="n-box" @click="()=>navclick(index)" >
                    <div class="n-nav thumb" :class="index == Index ? 'active':''">{{item.name}}</div>
                    <div class="n-tag">{{item.tag}}</div>
                </div>
                <div :class="index != 4 ? 'shu':''" ></div>
            </div>
        </div>
        <div class="category"  :style="{height:showNav?heightString:``}">
            <div class="flex"  ref="flex_container">
                <div class="c-nav thumb" v-for="item in List">{{ item.name }}</div>
            </div>
            <div class="more thumb" @click="showNavFunc">{{showNav?`收起`:`展开`}}<img :class="[`nav-icon`,showNav?`open`:``]" v-lazy="publicUrl('/images/lower.png')" alt=""></div>
        </div>
        <div class="shop">
            <div class="s-box s-box-width thumb" v-for="item in Data">
                <div class="s-img"><img v-lazy="item.img" alt=""></div>
                <div class="s-detail">{{ item.title }}</div>
                <div class="s-price">
                    <div class="price">￥<p class="p1">{{ item.price }}</p> </div>
                    <div class="num">成交{{ item.number }}件</div>
                </div> 
                <div class="s-company overOneSpec">{{ item.company }}</div>
            </div>

            <div class="s-box-width" v-for="index of surplusDiv(Data.length,5)"></div>

        </div>
    </div>
</template>

<script setup lang="ts" name>
import {ref,onMounted} from "vue"
import { publicUrl, surplusDiv } from "@/utils/util";
import { height } from "dom7";
 
interface Data{
    img:string,
    title:string,
    price:string,
    number:string,
    company:string
}
const Data = ref<Array<any>>(
    [{img:publicUrl('/images/Special1.png'),title:"夏季MTM定制化男衬衫短袖123",price:"59.90",number:"99",company:"云裁定制服装有限公司"},
    {img:publicUrl('/images/Special2.png'),title:"夏季MTM定制化男衬衫短袖",price:"59.90",number:"99",company:"云裁定制服装有限公司"},
    {img:publicUrl('/images/Special3.png'),title:"夏季MTM定制化男衬衫短袖",price:"59.90",number:"99",company:"云裁定制服装有限公司"},
    {img:publicUrl('/images/Special4.png'),title:"夏季MTM定制化男衬衫短袖",price:"59.90",number:"99",company:"云裁定制服装有限公司"},
    {img:publicUrl('/images/Special5.png'),title:"夏季MTM定制化男衬衫短袖",price:"59.90",number:"99",company:"云裁定制服装有限公司"},
    {img:publicUrl('/images/Special6.png'),title:"夏季MTM定制化男衬衫短袖",price:"59.90",number:"99",company:"云裁定制服装有限公司"},
    {img:publicUrl('/images/Special1.png'),title:"夏季MTM定制化男衬衫短袖",price:"59.90",number:"99",company:"云裁定制服装有限公司"},
    {img:publicUrl('/images/Special2.png'),title:"夏季MTM定制化男衬衫短袖",price:"59.90",number:"99",company:"云裁定制服装有限公司"},
    {img:publicUrl('/images/Special3.png'),title:"夏季MTM定制化男衬衫短袖",price:"59.90",number:"99",company:"云裁定制服装有限公司"},
    {img:publicUrl('/images/Special4.png'),title:"夏季MTM定制化男衬衫短袖",price:"59.90",number:"99",company:"云裁定制服装有限公司"},
    {img:publicUrl('/images/Special5.png'),title:"夏季MTM定制化男衬衫短袖",price:"59.90",number:"99",company:"云裁定制服装有限公司"},
    {img:publicUrl('/images/Special6.png'),title:"夏季MTM定制化男衬衫短袖",price:"59.90",number:"99",company:"云裁定制服装有限公司"},
    {img:publicUrl('/images/Special1.png'),title:"夏季MTM定制化男衬衫短袖",price:"59.90",number:"99",company:"云裁定制服装有限公司"},
    // {img:publicUrl('/images/Special2.png'),title:"夏季MTM定制化男衬衫短袖",price:"59.90",number:"99",company:"云裁定制服装有限公司"},
    // {img:publicUrl('/images/Special3.png'),title:"夏季MTM定制化男衬衫短袖",price:"59.90",number:"99",company:"云裁定制服装有限公司"}
]
)
interface List{
    name:string
}
const List =ref<Array<any>>(
    [
        {name:"男衬衫短袖"},{name:"男衬衫长袖"},{name:"女衬衫短袖"},{name:"女衬衫长袖"},{name:"男士休闲裤"},
        {name:"男衬衫短袖"},{name:"男衬衫长袖"},{name:"女衬衫短袖"},{name:"女衬衫长袖"},{name:"男士休闲裤"},
        {name:"男衬衫短袖"},{name:"男衬衫长袖"},{name:"女衬衫短袖"},{name:"女衬衫长袖"},{name:"男士休闲裤"},
        {name:"男衬衫短袖"},{name:"男衬衫长袖"},{name:"女衬衫短袖"},{name:"女衬衫长袖"},{name:"男士休闲裤"},
        {name:"男衬衫短袖"},{name:"男衬衫长袖"},{name:"女衬衫短袖"},{name:"女衬衫长袖"},{name:"男士休闲裤"},
    {name:"女士休闲裤"},{name:"女士连衣裙"},{name:"男衬衫短袖"},{name:"男衬衫长袖"}]
)
const Index =ref<number>(
    0
)
const navclick = (index:number)=>{
    Index.value = index
}
interface Nav{
    name:string,
    tag:string
}

const flex_container = ref<any>(null);

const Nav = ref<Array<any>>(
    [{name:"精选",tag:"猜猜您喜欢"},{name:"MTM定制",tag:"DIY产品"},
    {name:"现货产品",tag:"现货产家直接对接"},{name:"面料供应",tag:"优质面料供应商"},
    {name:"辅料供应",tag:"优质辅料供应商"}]
)
const showNav = ref<boolean>(false);
const heightString = ref<string>("auto");
const showNavFunc = ()=>{
    showNav.value =  !showNav.value ;
}

onMounted(()=>{
    // heightString.value = flex_container.value.clientHeight + 1 + 'px'
})


</script>

<style scoped lang="scss">

@media screen and (min-width: $pc-min-width) {
  @import "./index.scss";
}

</style>